<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>jquery.typeahead</title>
		<meta name="description" content="" />
		<meta name="author" content="Daniel" />
		<meta name="viewport" content="width=device-width; initial-scale=1.0" />
		<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
		<link rel="shortcut icon" href="/favicon.ico" />
		<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
		
		<link rel="stylesheet" href="../css/reset.css" />
		<link rel="stylesheet" href="../css/jquery.typeahead.css" />
	</head>
	<body>
		
		<div style="position: absolute; top: 100px; left: 200px">
			<input id="txt" />
		</div>
		
		<div style="position: absolute; top: 300px; left: 200px">
			<input id="txt_1" />
		</div>
		
		<script type="text/javascript" src="../js/jquery/jquery-1.8.1.min.js"></script>
		<script type="text/javascript" src="../js/jquery/jquery-ui-1.8.23.custom.min.js"></script>
		<script type="text/javascript" src="../js/jquery-plugin/jquery.extension.js"></script>
		<script type="text/javascript" src="../js/jquery-plugin/jquery.typeahead.js"></script>
		
		<script type="text/javascript">
			$(document).ready(function() {
				// 每次都异步加载数据源演示
				$('#txt').typeahead({
					labelField: ''
					, valueField: ''
					, ajaxLoad: true
					, ajaxUrl: '/facetalk2/robot/getSuggestedQuestions.gm'
					, ajaxDataField: ''
					, ajaxParamField: 'keyword'
				});
				
				
				// 静态数据源演示
				var datasource = [];
				$('#txt_1').typeahead({
					datasource: datasource
					, labelField: 'label' 
					, valueField: 'value' 
					, ajaxLoad: false 
					, direction: 'up'
				});
				
				for (var i=0; i<10; i++) {
					datasource.push({label:'hello world' + i, value:i});
				}				
				$('#txt_1').typeahead('updateDatasource', datasource);
			});
		</script>
	</body>
</html>
